<template>
  <view class="order-page">
	  <!-- 顶部轮播图 -->
	      <view class="swiper-wrapper"
		  :style="{ height: swiperHeight + 'rpx', overflow: swiperHeight === 0 ? 'hidden' : 'visible', transition: 'height 0.3s' }">
	        <u-swiper
	          :list="swiperList"
	          height="300rpx"
	          indicator
	          circular
	          autoplay
	          indicatorMode="dot"
	        ></u-swiper>
	      </view>
		  <view style="margin-top: 5px;margin-bottom: 6px;">
			  <view style="margin-bottom: 10px;">  
				  <text style="font-size: 26px;">⭐金山大润发店 ></text>
				  <image src="/static/pd.png" style="width: 40px;height: 40px; margin-left: 150px;"></image>
			  </view>
			  <view class="swiper-wrapper"
			  :style="{ height: swiperHeight2 + 'rpx', overflow: swiperHeight2 === 0 ? 'hidden' : 'visible', transition: 'height 0.3s' }">
			    <u-swiper
			      :list="swiperList2"
			      height="100rpx"
			      indicator
			      circular
			      autoplay
			      indicatorMode="dot"
				  img-mode="aspectFill"
			    ></u-swiper>
			  </view>
		  </view>
    <!-- 上部分：分类 + 内容 -->
    <view class="content-body u-flex">
      <!-- 左侧分类导航 -->
      <scroll-view class="category-nav" 
	  scroll-y 
	  :style="{ height: `calc(100vh - ${swiperHeight}rpx)` }"
	  :scroll-into-view="goToIndex" scroll-with-animation>
        <view
          v-for="(item, index) in categories"
          :key="index"
          :id="'cat-' + index"
          :class="['category-item', currentCategory === index ? 'active' : '']"
          @click="onCategoryClick(index)"
        >
          {{ item.name }}
        </view>
      </scroll-view>

      <!-- 右侧菜品内容区域 -->
      <scroll-view
        class="food-container"
        scroll-y
		:style="{ height: `calc(100vh - ${swiperHeight}rpx)` }"
        :scroll-into-view="goToIndex"
        @scroll="onScroll"
        scroll-with-animation
        ref="rightScroll"
		style="padding-bottom:90rpx;"
      >
        <view
          v-for="(item, index) in categories"
          :key="index"
          :id="'food-group-' + index"
          class="food-group"
          :ref="'foodGroup' + index"
        >
          <view class="group-title">{{ item.name }}</view>
          <view
            v-for="food in item.foods"
            :key="food.id"
            class="food-card u-flex"
          >
            <image :src="food.image ? `http://localhost:8090/carousel/getImg?fileName=${food.image}` : '/static/default.png'" class="food-image" mode="aspectFill" />
            <view class="food-info u-flex-col u-flex-1 u-p-l-10" style="margin-left: 20px;">
              <text class="food-name" style="display:block;">{{ food.name }}</text>
              <text class="food-desc" style="display:block;">{{ food.desc }}</text>
              <text class="food-member" style="display:block;">会员下单享9折优惠</text>
              <view class="u-flex u-row-between u-m-t-10">
                <text class="food-price">￥<text style="font-size: 26px;"> {{ food.price }}</text></text>
                <view style="margin-left: 65px;margin-top:8px;" v-if="food.count === 0">
					<u-button type="warning" size="mini" style="width: 50rpx; height: 100rpx; font-size: 26px;" @click="onOrderClick(food)">十</u-button>
				</view>
				<view v-else class="u-flex u-row-center u-m-l-80">
				  <up-icon name="minus-circle-fill" color="#fa3534" size="20" @click="onReduceClick(food)" />
				  <text style="margin: 10rpx 10rpx 0rpx 10rpx;">{{ getCountForFood(food) }}</text>
				  <up-icon name="plus-circle-fill" color="#19be6b" size="20" @click="onAddClick(food)" />
				</view>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
  
  <!-- 底部悬浮购物车 -->
  <view class="cart-bar">
    <view class="cart-icon" style="position: relative;width: 40px; height: 40px;" @click="onCartClick">
	  <u-icon name="shopping-cart" size="40" color="#333" />
      <u-badge :value="cartCount" type="error" absolute :offset="[-10, -10]" >
      </u-badge>
    </view>
    <view style="margin-left: 280px;margin-top: 0px;">
		<u-button type="success" size="small" style="width: 50rpx; height: 130rpx; font-size: 26px;" @click="submitFoods">选好了</u-button>
	</view>
  </view>
  
  <!-- 购物车弹窗 -->
  <up-popup :show="showCartPopup" mode="bottom" @close="showCartPopup = false">
	  <view style="padding: 40rpx; text-align: center;max-height: 90vh;display: flex;flex-direction: column;">
		   <!-- 新增提示文字 -->
		      <view v-if="cartHintText" class="u-text-center u-text-bold u-m-b-20" style="color: red;">
		        {{ cartHintText }}
		      </view>
			  <view v-else class="u-text-center u-text-bold u-m-b-20" style="color: red;">
				   <view class="u-text-bold u-text-center" style="flex: 1; color: red;">
				      您的购物车~
				    </view>
				   <view style="width: 50px;margin-left: 350px;">
					   <up-button type="error" size="small" @click="clearCart" style="margin-left: auto;">
					   		清空
					   	</up-button>
				   </view>
		      </view>
		  <view class="u-p-20">
		      <view v-for="(item, index) in cartList" :key="index" class="u-m-b-20 u-flex u-border-bottom">
		        <!-- 左边：菜品图片 -->
		        <image :src="item.dishImg ? `http://localhost:8090/carousel/getImg?fileName=${item.dishImg}` : '/static/default.png'" style="width: 80rpx; height: 80rpx; border-radius: 8rpx;" mode="aspectFill" />
		  
		        <!-- 右边内容 -->
		        <view class="u-flex-1 u-m-l-80">
		          <view class="u-font-bold" style="text-align: left;">{{ item.dishName }}</view>
		          <view class="u-text-sm u-text-gray" style="text-align: left;">{{ item.specText }}</view>
		          <view class="u-flex u-row-between u-m-t-10 u-align-center">
		            <view class="u-text-red">￥{{ item.price.toFixed(2) }}</view>
		            <view class="u-flex u-align-center" style="margin-left: 50px;">
		              <up-button icon="minus" size="mini" @click="decreaseItem(item)" />
		              <text class="u-m-x-10">{{ item.quantity }}</text>
		              <up-button icon="plus" size="mini" @click="item.quantity++" />
		            </view>
		          </view>
		        </view>
		      </view>
		    </view>
	  </view>
  </up-popup>
  
  <!-- 下面弹窗 -->
  <up-popup :show="showPopup" mode="center" @close="showPopup = false" >
    <view style="padding: 40rpx; text-align: center;max-height: 90vh;display: flex;flex-direction: column;">
       <!-- 顶部：图片 + 菜名 -->
          <view class="u-flex u-m-b-20">
            <image :src="selectedDish.dishImg != null ? `http://localhost:8090/carousel/getImg?fileName=${selectedDish.dishImg}` : '/static/default.png'" style="width: 120rpx; height: 120rpx; border-radius: 12rpx;" mode="aspectFill" />
            <view class="u-m-l-20 u-font-lg u-flex-1 u-line-2">{{ selectedDish.dishName }}</view>
          </view>
	    <!-- 中间规格选择滑动区域 -->
	    <scroll-view scroll-y style="flex: 1; max-height: 500rpx;">
	      <view v-for="spec in selectedDish.specList" :key="spec.name" class="u-m-b-20">
	        <view class="u-font-bold u-m-b-10" style="text-align: left;">{{ spec.name }}</view>
	        <view class="u-flex u-flex-wrap">
	          <view
	            v-for="option in spec.options"
	            :key="option.value"
	            :class="['spec-option', selectedSpecs[spec.name] === option.value ? 'selected' : '']"
	            @click="selectSpec(spec.name, option.value)"
	          >
	            <view v-if="option.extra === ''">
					{{ option.label }}
				</view>
				<view v-else>
					{{ option.label }} （{{ option.extra }})
				</view>
	          </view>
	        </view>
	      </view>
	    </scroll-view>
		  <!-- 底部固定：价格 + 数量 + 按钮 -->
		  <view class="u-flex u-row-between u-align-center u-m-t-30" style="padding-top: 20rpx; border-top: 1px solid #eee;">
				<view class="u-font-lg u-text-red">￥{{ totalPrice }}</view>
				<view class="u-flex u-align-center" style="margin-left: 200px;">
				  <up-button icon="minus" size="small" @click="changeQuantity(-1)" />
				  <text class="u-m-x-10">{{ quantity }}</text>
				  <up-button icon="plus" size="small" @click="changeQuantity(1)" />
				</view>
		  </view>
		  <view style="margin-top: 20px;">
		  	<up-button type="primary" @click="onSpecSelected">确定</up-button>
		  </view>
    </view>
  </up-popup>

</template>

<script setup>
import { ref, nextTick, onMounted,reactive,computed,watch  } from 'vue';
import { getAllDish,getSpecByDishId } from '@/api/orderFoods.js';
const swiperList = ref([
  '/static/top2.png',
  '/static/top1.png',
  '/static/top3.png',
  '/static/top4.png',
])
const swiperList2 = ref([
  '/static/bottom1.png',
  '/static/bottom2.png',
])
//查询的菜品信息
const categories = ref([])
//当前类别：米饭、锅底
const currentCategory = ref(0)

const goToIndex = ref('')
const swiperMaxHeight = 300; // rpx，高度和你u-swiper的height对应
const swiperMaxHeight2 = 100; // rpx，高度和你u-swiper的height对应
const swiperHeight = ref(swiperMaxHeight);
const swiperHeight2 = ref(swiperMaxHeight2);

const scrollTop = ref(0)
const rightScroll = ref(null)
const foodGroupHeights = ref([])

//显示规格弹窗
const showPopup = ref(false)
//选择食物
const selectedFood = ref(null)

//规格
const selectedSpecs = reactive({})
const quantity = ref(1) //添加的数量- 1 +
const selectedDish = ref({})//规格数据

//购物车
const showCartPopup = ref(false)
const cartList = ref([])
const cartHintText = ref('');//购物车顶部提示文字

//桌号
const tableNumber = ref(null)
const storeId = ref(null) //门店id
const userId = ref(null) //用户id



//规格界面
const selectSpec = (specName, value) => {
  selectedSpecs[specName] = value
}
//修改数量
const changeQuantity = (delta) => {
  if (quantity.value + delta >= 1) {
    quantity.value += delta
  }
}

//获取所有菜品
function getAllDishList(){
	// 使用扫码获取的门店号，如果没有则使用默认值
	const cachedStoreId = uni.getStorageSync('storeId')
	storeId.value = cachedStoreId ? parseInt(cachedStoreId) : 3;
	
	console.log('获取菜品列表，门店ID:', storeId.value)
	
	getAllDish(storeId.value).then(res => {
		categories.value = res.allDish;
		console.log('获取到菜品分类:', categories.value.length, '个')
	})
	.catch(() => {
		uni.showToast({
		  type: 'error',
		  message: '操作失败，请检查网络',
		  duration: 2000
		})
	})
}

//获取对应食物的规格信息
function getSpec(dishId){
	// 菜品id：
	return getSpecByDishId(dishId).then(res => {
		selectedDish.value = res.spec;
		// 清空旧的 selectedSpecs
		    Object.keys(selectedSpecs).forEach(key => delete selectedSpecs[key]);
		 // 设置每组规格默认选中第一个选项
		    res.spec.specList.forEach(specGroup => {
		      if (specGroup.options && specGroup.options.length > 0) {
		        selectedSpecs[specGroup.name] = specGroup.options[0].value;
		      }
		    });
	})
	.catch(() => {
		uni.showToast({
		  type: 'error',
		  message: '操作失败，请检查网络',
		  duration: 2000
		})
	})
}

//选择对应食物的最后价格
const totalPrice = computed(() => {
	let base = 0;
    selectedDish.value.specList?.forEach(spec => {
      const selectedValue = selectedSpecs[spec.name];
      if (selectedValue != null) {
        const option = spec.options.find(opt => opt.value === selectedValue);
        if (option && option.extra) {
          // 提取 extra 中的数字部分，如 "￥10.00" -> 10.00
          const match = option.extra.match(/[\d.]+/);
          if (match) {
            base += parseFloat(match[0]);
          }
        }
      }
    });
  
    return (base * quantity.value).toFixed(2); // 保留两位小数
})

//购物车数量
const cartCount = computed(() => {
	return cartList.value.reduce((sum,item) => sum + Number(item.quantity || 0 ),0)
  // return categories.value.reduce((total, category) => {
  //   return total + category.foods.reduce((sum, food) => sum + food.count, 0)
  // }, 0)
})

//购物车
function onOrderConfirm(selectedSpecs) {
  const key = generateSpecKey(selectedFood.value.id, selectedSpecs)

  const existingItem = cartList.value.find(item => item.key === key)
	
  if (existingItem) {
    existingItem.count += quantity.value
  } else {
    cartList.value.push({
      key,
      dishId: selectedFood.value.id,
      name: selectedFood.value.name,
      specs: selectedSpecs,
      price: selectedFood.value.price,
      count: quantity.value
    })
  }

  showPopup.value = false
}
//获取购物车数量
function getCountForFood(food) {
  return cartList.value
    .filter(item => item.dishId === food.id)
    .reduce((sum, item) => sum + Number(item.quantity || 0), 0)
}


//清空上一个菜品的规格选择
function clearSelectedSpecs() {
  for (const key in selectedSpecs) {
    delete selectedSpecs[key]
  }
}

//关闭购物车后清空提示
watch(showCartPopup, (val) => {
  if (!val) {
    cartHintText.value = ''
  }
})
//清空购物车
function clearCart(){
	cartList.value = []
	cartHintText.value = '' // 清空提示文字
	syncFoodCount(); // 加上这句！
}
// 点击点餐按钮
function onOrderClick(food) {
  console.log('点击点餐', food)
  selectedFood.value = food
   clearSelectedSpecs()
  quantity.value = food.count || 1 //如果点过了，就显示之前的数量
  getSpec(selectedFood.value.id).then(() => {
	  showPopup.value = true
  })
}

// 点击 + 也弹出弹窗
function onAddClick(food) {
  selectedFood.value = food
  clearSelectedSpecs()
  quantity.value = food.count || 1 //如果点过了，就显示之前的数量
  getSpec(selectedFood.value.id).then(() => {
	 showPopup.value = true
  })
}
//规格一样的放一起，不一样的分开
function isSameSpecs(a, b) {
  const aVals = a.map(s => s.value).sort().join(',');
  const bVals = b.map(s => s.value).sort().join(',');
  return aVals === bVals;
}
// 弹窗点击确定规格
function onSpecSelected() {
	const food = selectedFood.value
	const dish = selectedDish.value
	//累加数量
	food.count = quantity.value
	//构建规格信息组{type:"规格",label:"小份",value:1}
	const specDetails = dish.specList.map(group => {
		const selectedValue = selectedSpecs[group.name];
		const selectedOption = group.options.find(opt => opt.value === selectedValue);
		return {
			type:group.name,
			label:selectedOption?.label || '',
			value:selectedOption?.value,
			extra:selectedOption?.extra || ''
		};
	});
	const specText = specDetails.map(s => `${s.type}:${s.label}`).join(' / ');
	//计算总价格
	let unitPrice = 0;
	specDetails.forEach(spec => {
		const match = spec.extra.match(/[\d.]+/);
		if(match){
			unitPrice += parseFloat(match[0]);
		}
	});
	//用户id - 从登录状态获取，如果没有则报错
	const cachedUserId = uni.getStorageSync('userId');
	console.log('点餐页面 - 获取到的缓存userId:', cachedUserId)
	console.log('点餐页面 - 缓存userId类型:', typeof cachedUserId)
	
	if (!cachedUserId) {
		uni.showModal({
			title: '登录提示',
			content: '请先完成登录再进行点餐',
			showCancel: false,
			confirmText: '去登录',
			success: () => {
				uni.switchTab({ url: '/pages/index/index' });
			}
		});
		return;
	}
	userId.value = cachedUserId;
	console.log('点餐页面 - 设置userId.value为:', userId.value)
	console.log('点餐页面 - userId.value类型:', typeof userId.value)
	//桌号 - 从扫码获取，如果没有则报错
	if (!tableNumber.value) {
		uni.showModal({
			title: '扫码提示',
			content: '请先扫描桌上的二维码',
			showCancel: false,
			confirmText: '去扫码',
			success: () => {
				uni.switchTab({ url: '/pages/scanCode/scanCode' });
			}
		});
		return;
	}
	const newItem = {
		dishId:dish.dishId,
		dishName:dish.dishName,
		dishImg:dish.dishImg,
		specs:specDetails,
		specText,
		price:unitPrice,
		quantity:quantity.value,
		tableNumber:tableNumber.value,
		storeId:storeId.value,
		userId:userId.value
	}
	console.log('点餐页面 - 创建newItem时的userId:', userId.value)
	console.log('点餐页面 - newItem完整数据:', newItem)
	// 查找是否已有相同的菜和规格组合（规格值全部相同）
	  const existing = cartList.value.find(item =>
	    item.dishId === newItem.dishId &&
	    isSameSpecs(item.specs,newItem.specs)
	  );
	
	  if (existing) {
	    existing.quantity += newItem.quantity;
	  } else {
	    cartList.value.push(newItem);
	  }

   console.log('加入购物车：', newItem)
  showPopup.value = false
  syncFoodCount(); // 加上这句！
}

//购物车点击
function onCartClick(){
	if (cartCount.value > 0) {
	    showCartPopup.value = true;
	  } else {
	    uni.showToast({
	      title: '购物车是空的~',
	      icon: 'none'
	    });
	  }
}
//购物车内菜品减为0，清除菜品
function decreaseItem(item) {
  item.quantity--;
  if (item.quantity <= 0) {
    const index = cartList.value.indexOf(item);
    if (index !== -1) {
      cartList.value.splice(index, 1);
    }
  }
  syncFoodCount(); // 
}

// 减少数量
function onReduceClick(food) {
  selectedFood.value = food;//记录点击的菜品
  cartHintText.value = '您要修改哪些商品?';//提示文字
  showCartPopup.value = true;//弹出购物车
}

// 点击左侧分类
function onCategoryClick(index) {
  currentCategory.value = index
  goToIndex.value = 'food-group-' + index // 使用 scroll-into-view 跳转
}

// 滚动右侧同步左侧高亮
function onScroll(e) {
  const scrollY = e.detail.scrollTop;
 // 轮播图高度动态缩小
      if (scrollY >= 100) {
          swiperHeight.value = 0;
		  swiperHeight2.value = 0;
        } else {
          swiperHeight.value = swiperMaxHeight - scrollY;
          swiperHeight2.value = swiperMaxHeight2 - scrollY;
        }
  uni.createSelectorQuery()
    .selectAll('.food-group') // 获取所有组
    .boundingClientRect(rects => {
      for (let i = 0; i < rects.length; i++) {
        const top = rects[i].top;
        const nextTop = rects[i + 1] ? rects[i + 1].top : Number.MAX_VALUE;
        if (top <= 100 && nextTop > 100) {
          currentCategory.value = i;
          break;
        }
      }
    })
    .exec();
}


//同步更新数量food.count
function syncFoodCount() {
  categories.value.forEach(category => {
    category.foods.forEach(food => {
      food.count = getCountForFood(food);
    });
  });
}

// 获取每组菜品高度
onMounted(() => {
  // 检查是否已扫码
  checkScanStatus()
  
  // 验证购物车数据一致性
  validateCartData()
  
  nextTick(() => {
    let promises = categories.value.map((_, i) => {
      return new Promise(resolve => {
        uni.createSelectorQuery()
          .select(`#food-group-${i}`)
          .boundingClientRect(data => resolve(data?.top || 0))
          .exec()
      })
    })
    Promise.all(promises).then(topList => {
      foodGroupHeights.value = topList.map((top, i) => ({
        index: i,
        top
      }))
    })
  });
  getAllDishList();
})

// 验证购物车数据一致性
function validateCartData() {
  const currentUserId = uni.getStorageSync('userId')
  const storedCartList = uni.getStorageSync('cartList')
  
  if (storedCartList && storedCartList.length > 0 && currentUserId) {
    // 检查购物车中的商品是否使用了不同的用户ID
    const hasInconsistentUserId = storedCartList.some(item => 
      item.userId && item.userId != currentUserId
    )
    
    if (hasInconsistentUserId) {
      console.log('发现购物车中有不一致的用户ID，清理购物车数据')
      console.log('当前用户ID:', currentUserId)
      console.log('购物车数据:', storedCartList.map(item => ({ dishName: item.dishName, userId: item.userId })))
      
      // 清理不一致的购物车数据
      uni.removeStorageSync('cartList')
      cartList.value = []
      
      uni.showToast({
        title: '购物车已更新',
        icon: 'none',
        duration: 2000
      })
    }
  }
}

// 检查扫码状态
function checkScanStatus() {
  const cachedStoreId = uni.getStorageSync('storeId')
  const cachedTableNo = uni.getStorageSync('tableNo')
  
  console.log('检查扫码状态:', { cachedStoreId, cachedTableNo })
  
  if (!cachedStoreId || !cachedTableNo) {
    uni.showModal({
      title: '温馨提示',
      content: '请先扫描桌上的二维码再开始点餐',
      showCancel: false,
      confirmText: '去扫码',
      success: () => {
        uni.switchTab({
          url: '/pages/scanCode/scanCode'
        })
      }
    })
    return false
  }
  
  // 使用扫码获取的信息
  storeId.value = parseInt(cachedStoreId)
  tableNumber.value = parseInt(cachedTableNo)
  
  console.log('使用扫码信息:', { storeId: storeId.value, tableNumber: tableNumber.value })
  return true
}

//提交菜品信息
function submitFoods(){
	console.log('点餐页面 - 提交购物车前的数据:', cartList.value)
	console.log('点餐页面 - 购物车中各商品的userId:', cartList.value.map(item => ({ dishName: item.dishName, userId: item.userId })))
	
	uni.setStorageSync('cartList', cartList.value); // 存入本地缓存
	
	// 验证存储后的数据
	const storedData = uni.getStorageSync('cartList')
	console.log('点餐页面 - 存储后读取的购物车数据:', storedData)
	console.log('点餐页面 - 存储后各商品的userId:', storedData.map(item => ({ dishName: item.dishName, userId: item.userId })))
	
  uni.navigateTo({
    url: '/pages/confirmOrder/confirmOrder' // 跳转页面路径根据你的实际情况修改
  });
}
</script>

<style scoped>
.order-page {
  height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.scroll-container {
  height: 100vh;
}
.category-nav {
  width: 160rpx;
  background: #f7f7f7;
  overflow-y: scroll;
    height: 100%;
}

.category-item {
  padding: 20rpx;
  font-size: 28rpx;
  text-align: center;
  color: #666;
}
.category-item.active {
  color: #2979ff;
  font-weight: bold;
  background-color: #fff;
}

.food-container {
  flex: 1;
  height: 100%;
  overflow-y: scroll;
  background: #fff;
  padding: 0 20rpx;
}

.food-group {
  margin-bottom: 40rpx;
}

.group-title {
  font-size: 32rpx;
  font-weight: bold;
  margin: 20rpx 0;
}

.food-card {
  background-color: #f9f9f9;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  width: 500rpx;
}

.food-image {
  width: 160rpx;
  height: 150rpx;
  border-radius: 12rpx;
}

.food-name {
  font-size: 30rpx;
  font-weight: bold;
}
.food-desc {
  font-size: 24rpx;
  color: #888;
  margin-top: 8rpx;
}
.food-member {
  font-size: 22rpx;
  color: #f56c6c;
  margin-top: 8rpx;
}
.food-price {
  font-size: 30rpx;
  color: red;
}



.cart-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background-color: #fff;
  box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.1);
  padding: 0 30rpx;
  z-index: 999;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cart-icon {
  position: relative; /* 确保 u-badge 的 absolute 定位基于此容器 */
}

.spec-option {
  padding: 10rpx 20rpx;
  margin: 0 10rpx 10rpx 0;
  border: 1px solid #ccc;
  border-radius: 30rpx;
  font-size: 26rpx;
  background-color: #f8f8f8;
}
.spec-option.selected {
  border-color: #f56c6c;
  background-color: #fef0f0;
  color: #f56c6c;
}
.cart-popup {
  padding: 20rpx;
  box-sizing: border-box;
  background-color: #fff;
}

.cart-title {
  font-size: 34rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.cart-item {
  display: flex;
  margin-bottom: 20rpx;
  background-color: #f8f8f8;
  border-radius: 16rpx;
  padding: 20rpx;
}

.dish-img {
  width: 140rpx;
  height: 140rpx;
  border-radius: 8rpx;
  margin-right: 20rpx;
}

.dish-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.dish-name {
  font-size: 30rpx;
  font-weight: 500;
}

.dish-spec {
  font-size: 26rpx;
  color: #999;
}

.dish-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dish-price {
  font-size: 30rpx;
  color: #e64340;
  font-weight: bold;
}

.dish-step {
  display: flex;
  align-items: center;
}

.cart-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0 0;
  border-top: 1px solid #eee;
}
.total-price {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
}

.swiper-wrapper {
  width: 100%;
/*  height: 300rpx;
  margin-bottom: 20rpx; */
}
.content-body {
   display: flex;
    flex: 1;
    overflow: hidden;
}

</style>
